<template>
	<view class="commentFrame">
		<uni-easyinput ref="uipt" :maxlength="iptTextMaxlength" @confirm="goComment" suffixIcon="paperplane"
			v-model="replyContent" :placeholder="placeholder" @iconClick="goComment">
		</uni-easyinput>
		<view class="wordCountPrompt">
			{{replyContent.length}} / {{iptTextMaxlength}}
		</view>
	</view>
</template>

<script>
	import {
		getProvince
	} from "@/utils/tools.js"
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import pageJson from "@/pages.json"
	const db = uniCloud.database();
	const dbCmd = db.command;
	const utilsObj = uniCloud.importObject("CloudFishCircle-utilsObj", {
		customUI: true
	});
	export default {
		name: "CommentFrame",
		props: {
			commentObj: {
				type: Object,
				default: () => {
					return {

					}
				}
			},
			placeholder: {
				type: String,
				default: "评论点什么吧~"
			}
		},
		data() {
			return {
				iptTextMaxlength: 60,
				replyContent: ""
			};
		},
		methods: {
			// 提交评论
			async goComment() {
				// console.log('提交评论');
				// return
				if (!store.hasLogin) {
					uni.showModal({
						title: "登录后才可进行后续操作",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/" + pageJson.uniIdRouter.loginPage
								})
							}
						}
					})
					return;
				}
				if (!this.replyContent) {
					uni.showToast({
						title: "评论不能为空",
						icon: "none"
					})
					return;
				}
				let province = await getProvince();
				db.collection('cloud_fishCircle-comments').add({
					"comment_content": this.replyContent,
					"province": province,
					...this.commentObj
				}).then(res => {
					uni.showToast({
						title: "评论成功",
						icon: "none"
					})

					this.$emit("commentEnv", {
						_id: res.result.id,
						comment_content: this.replyContent,
						"province": province,
						comment_date: Date.now()
					})

					this.replyContent = ""
					utilsObj.operation("cloud_fishCircle-article", "comment_count", this.commentObj.article_id,
						1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commentFrame {
		width: 100%;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;

		.wordCountPrompt {
			position: absolute;
			bottom: 40rpx;
			right: 100rpx;
			font-size: 13px;
			color: #aaa;
		}
	}
</style>